<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%
        request.setAttribute("APP_PATH", request.getContextPath());
    %>
    <script src="${APP_PATH}/static/jquery.min.js"></script>
    <script src="${APP_PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="${APP_PATH}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<%--修改员工模态框--%>
<div class="modal fade" id="empUpdateModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">学生添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">name</label>
                        <div class="col-sm-10">
                            <p class="form-control-static" id="p1"></p>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dorm</label>
                        <div class="col-sm-10">
                            <input type="text" name="dorm" class="form-control" id="email_update_input"
                                   placeholder="dorm">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_update_input" value="男" checked="checked">
                                男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_update_input" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">password</label>
                        <div class="col-sm-10">
                            <input type="text" name="password" class="form-control" id="password_update_input"
                                   placeholder="password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_update_btn">修改</button>
            </div>
        </div>
    </div>
</div>
<%--添加员工模态框--%>
<div class="modal fade" id="empAddModel" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">学生添加</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post">
                    <div class="form-group">
                        <label class="col-sm-2 control-label">name</label>
                        <div class="col-sm-10">
                            <input type="text" name="name" class="form-control" id="empName_add_input"
                                   placeholder="name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">dorm</label>
                        <div class="col-sm-10">
                            <input type="text" name="dorm" class="form-control" id="email_add_input" placeholder="dorm">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">gender</label>
                        <div class="col-sm-10">
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender1_add_input" value="男" checked="checked"> 男
                            </label>
                            <label class="radio-inline">
                                <input type="radio" name="gender" id="gender2_add_input" value="女"> 女
                            </label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-2 control-label">password</label>
                        <div class="col-sm-10">
                            <input type="text" name="password" class="form-control" id="password_add_input"
                                   placeholder="password">
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
            </div>
        </div>
    </div>
</div>
<%--选课--%>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">选课</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" method="post">
                    <div>
                        <div class="form-group">
                            <label for="sId" class="col-sm-2 control-label">学生编号</label>
                            <div class="col-sm-10">
                                <input type="text" name="sId" class="form-control" id="sId" placeholder="学生编号">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="cId" class="col-sm-2 control-label">课程编号</label>
                            <div class="col-sm-10">
                                <input type="text" name="cId" class="form-control" id="cId" placeholder="1-软;2-网;3-数据库;4-L;5-操;6-W;7-数8-Java">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="grade" class="col-sm-2 control-label">学生成绩</label>
                            <div class="col-sm-10">
                                <input type="text" name="grade" class="form-control" id="grade" placeholder="学生成绩">
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="ok">确认</button>
                        <button type="button" class="btn btn-primary" id="cancel">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<%--主体--%>
<div class="container">
    <%--标题--%>
    <div class="row">
        <div class="col-md-12">
            <img src="${APP_PATH}/static/image/head730.jpg">
        </div>
    </div>
    <%--按钮--%>
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button class="btn btn-success" id="emp_add_model_btn">新增</button>
            <button class="btn btn-danger" id="course">选课</button>
        </div>
    </div>
    <%--显示数据--%>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover" id="emps_table">
                <thead>
                <tr>
                    <th>#</th>
                    <th>name</th>
                    <th>gender</th>
                    <th>dorm</th>
                    <th>课程成绩</th>
                    <th>password</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <%--分页信息--%>
    <div class="row">
        <%--分页文字信息--%>
        <div class="col-md-6" id="page_info_area"></div>
        <%--分页条--%>
        <div class="col-md-6" id="page_nav_area"></div>
    </div>
</div>

<script>
    let totalRecord
    let currentPage

    $(function () {
        to_page(1)
    })

    //跳转到页面
    function to_page(pn) {
        $.ajax({
            url: '${APP_PATH}/admin/findAll',
            data: 'pn=' + pn,
            type: 'get',
            success: function (data) {
                //1.解析并显示员工信息
                build_emps_table(data)
                //2.解析显示分页信息
                build_page_info(data)
                //3.解析显示分页条
                build_page_nav(data)
            }
        })
    }

    //构建员工表格
    function build_emps_table(data) {
        $('#emps_table tbody').empty()
        let emp = data.extend.pageInfo.list
        $.each(emp, function (index, item) {
            //员工信息构建
            let id = $('<td></td>').append(item.id)
            let name = $('<td></td>').append(item.name)
            let gender = $('<td></td>').append(item.gender)
            let dorm = $('<td></td>').append(item.dorm)
            let course = $('<td></td>').append($('<a></a>').text('课程成绩').attr('target', '_blank')
                .attr('href', 'http://localhost:8080/SSM/admin/scourse?id=' + item.id))
            let password = $('<td></td>').append(item.password)

            //编辑按钮
            let editBtn = $('<button></button>').addClass('btn btn-success btn-sm edit_btn')
                .append($('<span></span>').addClass('glyphicon glyphicon-pencil')).append('编辑')
            editBtn.attr('edit_id', item.id)
            //删除按钮
            let delBtn = $('<button></button>').addClass('btn btn-danger btn-sm del_btn')
                .append($('<span></span>').addClass('glyphicon glyphicon-trash')).append('删除')
            delBtn.attr('del_id', item.id)

            let btnTd = $('<td></td>').append(editBtn).append(' ').append(delBtn)
            $("<tr></tr>").append(id).append(name).append(gender).append(dorm).append(course).append(password)
                .append(btnTd)
                .appendTo('#emps_table tbody')
        })
    }

    //解析显示分页信息
    function build_page_info(data) {
        $('#page_info_area').empty()
        $('#page_info_area').append('当前第' + data.extend.pageInfo.pageNum + '页，总' +
            data.extend.pageInfo.pages + '页，总计' + data.extend.pageInfo.total + '记录数')
        totalRecord = data.extend.pageInfo.total
        currentPage = data.extend.pageInfo.pageNum
    }

    //解析显示分页条
    function build_page_nav(data) {
        $('#page_nav_area').empty()
        let ul = $('<ul></ul>').addClass('pagination')

        let firstPageLi = $('<li></li>').append($('<a></a>').append('首页').attr('href', '#'))
        let prePageLi = $('<li></li>').append($('<a></a>').append('&laquo;'))
        if (!data.extend.pageInfo.hasPreviousPage) {
            firstPageLi.addClass('disabled')
            prePageLi.addClass('disabled')
        } else {
            firstPageLi.click(function () {
                to_page(1)
            })
            prePageLi.click(function () {
                to_page(data.extend.pageInfo.pageNum - 1)
            })
        }

        let nextPageLi = $('<li></li>').append($('<a></a>').append('&raquo;'))
        let lastPageLi = $('<li></li>').append($('<a></a>').append('尾页').attr('href', '#'))
        if (!data.extend.pageInfo.hasNextPage) {
            nextPageLi.addClass('disabled')
            lastPageLi.addClass('disabled')
        } else {
            nextPageLi.click(function () {
                to_page(data.extend.pageInfo.pageNum + 1)
            })
            lastPageLi.click(function () {
                to_page(data.extend.pageInfo.pages)
            })
        }

        ul.append(firstPageLi).append(prePageLi)
        $.each(data.extend.pageInfo.navigatepageNums, function (index, item) {
            let numLi = $('<li></li>').append($('<a></a>').append(item))
            if (data.extend.pageInfo.pageNum == item) {
                numLi.addClass('active')
            }
            numLi.click(function () {
                to_page(item)
            })
            ul.append(numLi)
        })
        ul.append(nextPageLi).append(lastPageLi)
        let navEle = $('<nav></nav>').append(ul)
        navEle.appendTo('#page_nav_area')
    }

    //点击新增按钮
    $('#emp_add_model_btn').click(function () {
        //弹出模态框
        $('#empAddModel').modal({
            backdrop: 'static'
        })
    })

    //保存员工
    $('#emp_save_btn').click(function () {
        $.ajax({
            url: '${APP_PATH}/admin/saveStudent',
            type: 'post',
            data: $('#empAddModel form').serialize(),
            success: function (data) {
                //1.关闭模态框
                $('#empAddModel').modal('hide')
                //2.来到最后一页
                to_page(totalRecord)
            }
        })
    })

    function getEmp(id) {
        $.ajax({
            url: '${APP_PATH}/admin/getStudent',
            data: 'id=' + id,
            type: 'post',
            success: function (data) {
                let stu = data.extend.student
                $('#p1').text(stu.name)
                $('#email_update_input').val(stu.dorm)
                $('#empUpdateModel input[name=gender]').val([stu.gender])
                $('#password_update_input').val(stu.password)
            }
        })
    }

    $(document).on('click', '.edit_btn', function () {
        $('#emp_update_btn').attr('uid', $(this).attr('edit_id'))
        let id = $('.edit_btn').attr('edit_id')
        getEmp(id)
        $('#empUpdateModel').modal({
            backdrop: 'static'
        })
    })

    //更新员工信息
    $('#emp_update_btn').click(function () {
        $.ajax({
            url: '${APP_PATH}/admin/update/' + $(this).attr('uid'),
            type: 'post',
            data: $('#empUpdateModel form').serialize(),
            success: function (data) {
                $('#empUpdateModel').modal('hide')
                to_page(currentPage)
            }
        })
    })

    $(document).on('click', '.del_btn', function () {
        let empName = $(this).parents('tr').find('td:eq(1)').text()
        let empId = $(this).attr('del_id')
        if (confirm('确认删除【' + empName + '】吗？')) {
            $.ajax({
                url: '${APP_PATH}/admin/delEmp',
                data: 'id=' + empId,
                type: 'post',
                success: function (data) {
                    alert(data.msg)
                    to_page(currentPage)
                }
            })
        }
    })

    $('#course').click(function () {
        $('#myModal').modal({
            backdrop: 'static'
        })
    })

    $('#ok').click(function () {
        $.ajax({
            url: '${APP_PATH}/admin/saveReport',
            type: 'post',
            data: $('#myModal form').serialize(),
            success: function (data) {
                //1.关闭模态框
                $('#empAddModel').modal('hide')
                //2.来到最后一页
                to_page(currentPage)
            }
        })
    })
</script>
</body>
</html>
